<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Cache-Control" content="private">
	<meta content="telephone=no,email=no" name="format-detection">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>首页</title>
	
	<link rel="stylesheet" href="./css/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="./css/common/style.css">
	<script src="./js/lib/rem.js"></script>
	<script src="./js/lib/jquery-3.3.1.min.js"></script>
	
    <script src="./js/lib/common.js?v=100764523452"></script>
	<script src="./js/lib/FileSaver.js"></script>
	
</head>

<style>
	body{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
	.app{width:100%;height:100%;background:#f3f3f3;position:fixed;}
	.t-contain{width:100%;height:auto;}
	.t-top{height:3rem;background:#0c5dac;}
	.t-head{height:0.8rem;display:flex;flex-direction:row;justify-content:space-between;}
	.t-avatar{width:20%;line-height:0.9rem;text-align:center;}
	.t-avatar > img{width:0.6rem;height:0.6rem;border-radius:50%;}
	.t-service{width:26%;line-height:0.9rem;text-align:center;text-decoration:none;outline:none;}
	.t-service > span{font-size:0.3rem;color:#fff;}
	.t-service > img{width:0.5rem;height:0.5rem;margin-right:0.1rem;}
	.t-money{width:100%;height:1.3rem;}
	.t-mtitle{height:0.4rem;text-align:center;display:flex;flex-direction:row;justify-content:center;}
	.t-mtitle-l{width:auto;height:0.4rem;line-height:0.4rem;}
	.t-mtitle-l > span{font-size:0.26rem;color:#8eaeca;}
	.t-mcount{height:0.9rem;line-height:0.8rem;text-align:center;}
	.t-mcount > span{font-size:0.7rem;color:#fff;}
	.t-lastMoney{width:100%;height:0.6rem;display:flex;flex-direction:row;justify-content:center;}
	.t-lastMoney > div{width:auto;line-height:0.5rem;}
	.t-lastMoney > div > span{font-size:0.24rem;color:#8eaeca;}
	.t-lastAcount{margin-left:0.15rem;}
	.t-lastAcount > span{color:#fff !important;font-size:0.28rem !important;}
	.t-lastAcount > span > em{font-size:0.28rem;color:#fff !important;font-style:normal;}
	.t-lastAcount > img{width:0.4rem;height:0.4rem;margin-left:0.1rem;vertical-align:top !important;}

	.t-bottom{width:100%;height:2.4rem;background:#fff;}
	.t-bottom > div{height:1.2rem;}
	.commission,.balance{display:flex;flex-direction:row;}
	.commission > a,.balance > a{flex:1;padding-left:5%;text-decoration:none;outline:none;}
	.commission > a > p,.balance > a > p{height:0.65rem;line-height:0.8rem;font-size:0.28rem;color:#222;margin-bottom:0;}
	.commission > a > span,.balance > a > span{font-size:0.3rem;color:#989898;margin-left:0.1rem;}
	
	.b-notice{width:100%;height:0.8rem;}
	.b-notice-contain{width:92%;height:0.8rem;margin:0 auto;display:flex;flex-direction:row;}
	.notice-left{width:25%;height:0.8rem;display:flex;flex-direction:row;justify-content:space-around;align-items:center;}
	.notice-left > span{font-size:0.26rem;color:#f00;}
	.noticeicon{width:0.4rem;height:0.4rem;background:url('./img/icons/notice.png') no-repeat;background-size:0.4rem;}
	.b-notice-content{width:73%;height:0.8rem;line-height:0.8rem;overflow:hidden;white-space:nowrap;}
	.b-notice-content > span{margin-right:0.2rem;font-size:0.28rem;color:#f00;}
	
	.b-contain{width:100%;height:calc(100% - 7.4rem);background:#fff;display:flex;flex-direction:column;justify-content:space-between;}
	.b-head{width:100%;height:auto;}
	.b-help-contain{width:100%;height:0.8rem;padding-right:0.2rem;display:flex;justify-content:flex-end;}
	.b-help-contain > a{width:35%;height:0.8rem;text-decoration:none;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;}
	.b-help-img{width:0.4rem;height:0.4rem;margin-right:0.1rem;background:url('./img/icons/help.png') no-repeat;background-size:0.4rem;}
	.b-help-contain > a > span{font-size:0.28rem;color:#222;}

	.b-btn{height:auto;}
	.b-btn > div{position:relative;width:2rem;height:2rem;line-height:2rem;text-align:center;margin:0 auto;border-radius:50%;border:0.02rem #bdbdbd solid;}
	.b-btn > div > img{display:none;width:1rem;height:1rem;}
	
	.rotateBall{width:2rem;height:2rem;position:absolute;top:-0.02rem;left:-0.02rem;}
	.rotateBall > span{display:none;width:0.15rem;height:0.15rem;background:#007AFF;border-radius:50%;position:absolute;left:0.925rem;top:-0.075rem;}

	.b-key-contain{height:0.6rem;text-align:center;}
	.b-key-contain > span{font-size:0.3rem;color:#222;}

	.f{width:100%;height:1rem;position:fixed;left:0;bottom:0;background:#fff;display:flex;flex-direction:row;align-items:center;}
	.f > a{height:1rem;margin:0 3%;text-decoration:none;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}
	.f > a > span{font-size:0.26rem;color:#636363;}
	.f > a > i{width:0.4rem;height:0.4rem;}
	.f > a > i.index{background:url('./img/icons/index.png') no-repeat;background-size:0.4rem 0.4rem;}
	.f > a > i.config{background:url('./img/icons/setup.png') no-repeat;background-size:0.4rem 0.4rem;}
	.f > a > i.position{background:url('./img/icons/position.png') no-repeat;background-size:0.4rem 0.4rem;}
	.f > a > i.mine{background:url('./img/icons/mine.png') no-repeat;background-size:0.4rem 0.4rem;}
	.index-active{background:url('./img/icons/index-active.png') no-repeat;background-size:0.4rem 0.4rem;}
	/* .config-active{background:url('./img/icons/setup-active.png') no-repeat;background-size:0.4rem 0.4rem;}
	.position-active{background:url('./img/icons/position-active.png') no-repeat;background-size:0.4rem 0.4rem;}
	.mine-active{background:url('./img/icons/mine-active.png') no-repeat;background-size:0.4rem 0.4rem;} */
	.active-s{color:#0c5dac !important;}
	
</style>

<body>
	<div class="app">
		<div class="t-contain">
			<div class="t-top">
				<div class="t-head">
					<a href="./person.html" class="t-avatar"><img src="./img/avatar.png" alt=""></a>
					<a href="./person-service.html" class="t-service"><img src="./img/icons/service.png" alt=""><span>客服</span></a>
				</div>
				<div class="t-money">
					<div class="t-mtitle">
						<div class="t-mtitle-l"><span>总收益(元)</span></div>
					</div>
					<div class="t-mcount">
						<span id="totalMoney">0.00</span>
					</div>
				</div>
				<div class="t-lastMoney">
					<div><span>昨日收益(元)</span></div>
					<div class="t-lastAcount"><span id="prevMoney">+<em>0.00</em></span><img src="./img/icons/icon.png" alt=""></div>
				</div>
			</div>

			<div class="t-bottom">
				<div class="commission">
					<a href="./commission-task.html">
						<p>任务佣金</p>
						<span id="taskMoney">0.00</span>
					</a>
					<a href="./commission-recommend.html">
						<p>推荐佣金</p>
						<span id="recommendMoney">0.00</span>
					</a>
				</div>

				<div class="balance">
					<a href="./putforward-record.html">
						<p>已经提现</p>
						<span id="putforwardMoney">0.00</span>
					</a>
					<a href="./balance.html">
						<p>可用余额</p>
						<span id="usableMoney">0.00</span>
					</a>
				</div>
			</div>
		</div>
		
		<div class="b-notice">
			<div class="b-notice-contain">
				<div class="notice-left">
					<i class="noticeicon"></i>
					<span>通知：</span>
				</div>
				<div class="b-notice-content" id="noticeContent">
					<span id="noticeBegin"></span>
					<span id="noticeEnd"></span>
				</div>
			</div>
		</div>
		
		<div class="b-contain">
			<div class="b-head">
				<div class="b-help-contain">
					<a href="./help.html">
						<span class="b-help-img"></span>
						<span>新手帮助</span>
					</a>
				</div>
			</div>
			
			<div class="b-btn">
				<div  id="enginBtn">
					<div class="rotateBall"><span></span></div>
					<img src="./img/icons/start.png" alt="">
				</div>
			</div>
			<div class="b-key-contain">
				<span>一键自动执行</span>
			</div>
		</div>

		<div class="f">
			<a href="./index.html"><i class="index-active"></i><span class="active-s">首页</span></a>
			<a href="./setup.html" id="preloadPosition"><i class="config"></i><span>设置</span></a>
			<a href="./position.html"><i class="position"></i><span>定位</span></a>
			<a href="./person.html"><i class="mine"></i><span>我的</span></a>
		</div>
	</div>

	<!-- private and protocol select state -->
	<div class="state-modal" id="stateLayer">
		<div class="statemodal-contain">
			<div class="statemodal-content">
				<div class="statemodal-icon">
					<i class="" id="stateicon"></i>
				</div>
				<div class="statemodal-text" >
					<span id="stateContext">数据加载中…</span>
				</div>
			</div>
		</div>
	</div>
	
	<div id="taskdiv"></div>
		
	<!-- putforward modal -->
	<div class="infor-modal" id="inforModal">
		<div class="infor-inner">
			<div class="infor-contain">
				<div class="informodal-title">
					<div class="modal-title">
						<span>试玩助手</span>
					</div>
				</div>
				<div class="inforModal-content">
					<span id="inforContextTitle"></span>
					<span id="inforContext"></span>
				</div>
			</div>
		</div>
	</div>
	
	

	<script src="./js/sendtask.js?v=107565"></script>
	<script type="text/javascript" src="./js/lib/map/maps.js"></script>
	<script src="./js/lib/mui/mui.min.js"></script>
	
	<script>
		
		//初始化预加载详情页面
		mui.init({
		  preloadPages:[{
			id:'position',
			url:'./position.html'
		  }]
		});

		
		$(function(){
			
			var urlip = localStorage.getItem('urlip')
			var url = 'http://'+ urlip +':8080/platform-web/'
			var userid = localStorage.getItem('userid');
			var isLogin = localStorage.getItem('loginstate');
			var rollTimer = null;
			var curdeg = 0;
			var isclick = false;		
			
			var taskstate = localStorage.getItem('taskstate');
			if(taskstate === 'true'){
				$('#enginBtn').children('img').show().attr('src','./img/icons/pause.png');
				curdeg = Math.round(Math.random()*360);
				//start roll rotate
				startRoll();
				
				//after five minutes send task start
				setTimeSendTaskStart();
				
			}else{
				$('#enginBtn').children('img').show().attr('src','./img/icons/start.png');
				$('#enginBtn').children('div').children('span').show();
				$('#enginBtn').children('div').css('transform','rotate(0deg)');
				
				//after five minutes send task end
				setTimeSendTaskEnd();
			}
			
			//init index page
			init(isLogin);
			
			//show index info
			showIndexInfo(url,userid);
			
			//show notice infor
			showNoticeInfo()
			
			//start task btn
			startTaskBtn(url,userid);
			
			//init index page
			function init(login){
				if(!login){
					location.href = './login.html';
				}else{
					return false;
				}
			}
			
			//show index info
			function showIndexInfo(url,userid){
				if(userid){
					$.ajax({
						type:'POST',
						url:url+'user/userInfo',
						dataType:'json',
						data:{
							id:userid,
						},
						success:function(data){
							if(data.code === 403){
								location.href = './login.html';
								localStorage.clear();
							}else if(data.code === 404){
								alert('设备被锁');
							}else if(data.code === 5000 ){
								var userInfo = data.userInfo;
								localStorage.setItem('phone',userInfo.phone);
								localStorage.setItem('invitecode',userInfo.code);
								$('#totalMoney').text(userInfo.strCommission ? userInfo.strCommission : '0.00');
								$('#prevMoney > em').text(userInfo.yesterdayIncome ? userInfo.yesterdayIncome : '0.00');
								$('#taskMoney').text(userInfo.taskCommission ? userInfo.taskCommission : '0.00');
								$('#recommendMoney').text(userInfo.recommendCommission ? userInfo.recommendCommission : '0.00');
								$('#putforwardMoney').text(userInfo.withdrawMoney ? userInfo.withdrawMoney : '0.00');
								$('#usableMoney').text(userInfo.strMoney ? userInfo.strMoney : '0.00');
							}
						}
					})
				}else{
					setTimeout(function(){
						location.href = './login.html'
					},1500)
				}
			}
			
			//show notice infor
			function showNoticeInfo(){
				$.ajax({
					type:'POST',
					url:url+'notice/noticeList',
					dataType:'json',
					success:function(data){
						// console.log(data)
						if(data.code === 403){
							location.href = './login.html';
						}else if(data.code === 404){
							alert('设备被锁');
						}else if(data.code === 5000 ){
							if(data.notice.length != 0){
								var noticeText = ''
								for(var i=0;i<data.notice.length;i++){
									noticeText += data.notice[i].context + '&nbsp;&nbsp;&nbsp;&nbsp;';
								}
								
								$('#noticeBegin').html(noticeText);
								
								//notice scroll
								ScrollImgLeft();
							}
						}
					}
				})
			}
			
			//notice scroll
			function ScrollImgLeft(){
				var speed = 30;
				var scroll_begin = document.getElementById("noticeBegin");
				var scroll_end = document.getElementById("noticeEnd");
				var scroll_div = document.getElementById("noticeContent");
				scroll_end.innerHTML = scroll_begin.innerHTML;
				function Marquee(){
					if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){
						scroll_div.scrollLeft -= scroll_begin.offsetWidth;
					}else{
						scroll_div.scrollLeft++;
					}
				}
				setInterval(Marquee,speed);
			}
			
			//start task btn
			function startTaskBtn(url,userid){
				isclick = !isclick;
				$('#enginBtn').click(function(){
					if($(this).children('img').attr('src') === './img/icons/start.png' && isclick === true){
						
						isclick = false;
						
						var privateState = localStorage.getItem('privatestate');
						var protocolState = localStorage.getItem('protocolstate');
						if(privateState === 'true' && protocolState === 'true'){
							//set private and protocol
							localStorage.setItem('ppkey',false);
							//send task
							sendTask(url,userid)
							
							//after five minutes send task start
							setTimeSendTaskStart()
							
							//start roll rotate
							startRoll();
							localStorage.setItem('taskstate',true);
							
							location.href = "./tasking.html";
						}else{
							//set private and protocol
							localStorage.setItem('ppkey',true);
							location.href = "./setup.html?tips=1";
						}
						
					}else{
						isclick = true;
						//stop roll rotate
						stopRoll();
						localStorage.setItem('taskstate',false);
						
						//after five minutes send task end
						setTimeSendTaskEnd();
					}
				});
			}
			
			//start roll rotate
			function startRoll(){
				rollTimer = setInterval(function(){
					if(curdeg === 360){
						curdeg = 0;
					}else{
						curdeg++;
					}
					$('#enginBtn').children('div').css('transform','rotate('+ curdeg +'deg)')
					$('#enginBtn').children('div').children('span').show();
					
				},20)
				$('#enginBtn').children('img').show().attr('src','./img/icons/pause.png');
				
				//after five minutes send task start
			}
			
			//stop roll rotate
			function stopRoll(){
				clearInterval(rollTimer);
				$('#enginBtn').children('img').show().attr('src','./img/icons/start.png');
				$('#enginBtn').children('div').css('transform','rotate(0deg)')
			}
			
			
		});
		
	</script>
</body>
</html>